<template>
	<view>
<!-- 		<view class="p0-8"><uni-search-bar placeholder="搜索内容" bgColor="#EEEEEE" @confirm="search" /></view>
		<view class="p0-15">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<uni-data-checkbox mode="tag" selectedColor="#FFD101" v-model="selectType" @change="onSelectType" :localdata="baikeType"></uni-data-checkbox>
			</scroll-view>
		</view> -->
		<uni-row>
			<uni-col v-for="item in dataInfo.list" :key='item.id' :span="12" >
				<view class="p8 mt10" @click="onLink('info/info',item.id)"><image style="width: 100%;border-radius: 3px;" :src="item.cover" mode="aspectFill"></image></view>
				<view class="p0-8 title">{{item.title}}</view>
				<uni-row class="p8">
					<uni-col :span="12">
						<view class="text-left p0-8 user">
							<image style="width: 16px;" :src="item.publish_user.head_img" mode="widthFix" />
							<text class="ml5">{{item.publish_user.name}}</text>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right p0-8 user"><uni-icons type="star" size="15"></uni-icons><text class="ml5">{{item.collect_num}}</text></view>
					</uni-col>
				</uni-row>
			</uni-col>
		</uni-row>
		<uni-load-more :status="status" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{page:1,type:0},
				selectType:0,
				baikeType: [],
				dataInfo:{list:[],count:0,num:10,page:1},
				status:'more',
				loadData : true,
			}
		},
		onShow() {
			this.onGetData()
		},
		methods: {
			save(){
				
			},
			onGetData(){
				this.status = 'loading'
				if(!this.loadData){
					this.status = 'no-more'
					return false;
				}
				let _this = this
				this.$request('/api2/selfTie','POST',this.form).then(res => {
					_this.dataInfo.count = res.data.count
					_this.dataInfo.page = res.data.page
					_this.dataInfo.num = res.data.num
					if(res.data.list.length == 0 || (res.data.list.length < res.data.num)){
						_this.loadData = false
						_this.status = 'no-more'
					}
					res.data.list.forEach((e) => {
						e.img = JSON.parse(e.img)
						e.cover = e.img[0]
					})
					_this.form.page = res.data.page + 1
					_this.dataInfo.list.push(...res.data.list) 
				}).catch(err => {
					console.log(err)
				})
			},
			onReachBottom() {
				this.onGetData()
			},
			onSelectType(e){
				this.form.page = 1
				this.form.type = e.detail.data.id
				this.dataInfo.list = []
				this.onGetData()
			},
			search(e){
				this.form.title = e.value
				this.form.page = 1
				this.dataInfo.list = []
				onGetData()
			},
			mapType(data){
				let obj = { name: '全部', id: 0 }
				data.unshift(obj)
				return data.map((item) => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/posts/"+url+"?id="+id
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.scroll-view_H {white-space: nowrap;width: 100%;}
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.user{font-size: .8rem;margin-top: 5px;}
.user image{position: relative;top: 3px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
.fixed-bottom{bottom: 8px;}
.fixed-bottom .default-button{border-radius: 25px;}
</style>
